<template>
    <div class="audit-video-detail" v-loading="loading">
        <div class="top-tip">{{currentIndex + 1}} / {{list.length}}</div>
        <div class="flex-box">
            <div class="left-box">
                <div class="video-box">
                    <video
                        v-if="detail.mp4Url || detail.url"
                        ref="readio"
                        controls="controls"
                        autoplay="autoplay"
                        class="video"
                        :src="detail.mp4Url || detail.url">
                    </video>
                    <span v-else>暂无视频</span>
                </div>
                <div class="video-playbackRate">
                    <span>播放速度：</span>
                    <el-select v-model="playbackRate" style="width:100px;" placeholder="请选择" @change="playbackRateChange">
                        <el-option label="1倍" :value="1"></el-option>
                        <el-option label="1.25倍" :value="1.25"></el-option>
                        <el-option label="1.5倍" :value="1.5"></el-option>
                        <el-option label="2倍" :value="2"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="right-box">
                <div class="rigth-item">
                    <div class="title">封面</div>
                    <div class="content">
                        <div class="icon">
                            <img :src="detail.cover" alt="">
                        </div>
                    </div>
                </div>
                <div class="rigth-item">
                    <div class="title">标题</div>
                    <div class="content">{{detail.title}}</div>
                </div>
                <div class="rigth-item">
                    <div class="title">视频ID</div>
                    <div class="content">{{detail.videoid}}</div>
                </div>
                <div class="rigth-item">
                    <div class="title">关联游戏</div>
                    <div class="content">{{detail.gameName || '/'}}</div>
                </div>
                <div class="rigth-item">
                    <div class="title">视频类型</div>
                    <div class="content">{{whatType(detail.category)}}</div>
                </div>
                <div class="rigth-item">
                    <div class="title">视频种类</div>
                    <div class="content" v-if="detail.type === 0">官方制作</div>
                    <div class="content" v-else-if="detail.type === 1">用户制作</div>
                    <div class="content" v-else-if="detail.type === 2">趣游戏制作</div>
                </div>
                <div class="rigth-item">
                    <div class="title">作者</div>
                    <div class="content">
                        <img :src="detail.userIcon" alt="" class="user-icon">
                        <span>{{detail.userName}}</span>
                    </div>
                </div>
                <div class="rigth-item">
                    <div class="title">作者id</div>
                    <div class="content">{{detail.userid}}</div>
                </div>
                <div class="rigth-item">
                    <div class="title">已传视频数</div>
                    <div class="content">{{detail.userVideoCount || 0}}</div>
                </div>
                <div class="rigth-item">
                    <div class="title">发布时间</div>
                    <div class="content">{{detail.createTime | timeNo0}}</div>
                </div>
                <div class="rigth-item">
                    <div class="title">审核状态</div>
                    <div class="content">
                        <span v-if="detail.auditStatus === 1">自动审核通过</span>
                        <span v-else-if="detail.auditStatus === 2" style="color:#67C23A;">人工审核通过</span>
                        <span v-else style="color:#F56C6C;">下架</span>
                    </div>
                </div>

                <div class="tools">
                    <el-button size="mini" type="success" @click="throwUser">通过（1）</el-button>
                    <el-button size="mini" type="danger" @click="showRefusedUser = true">拒绝（2）</el-button>
                    <!-- <el-button size="mini" type="info" @click="showDisableUser = true">封禁（3）</el-button> -->
                    <el-button size="mini" type="primary" @click="goUp">上一条（↑）</el-button>
                    <el-button size="mini" type="primary" @click="goDown">下一条（↓）</el-button>
                </div>
            </div>
        </div>

        <!-- 拒绝用户 -->
        <el-dialog
            class="show-refused-user-box"
            title="驳回原因"
            :close-on-click-modal="false"
            :show-close="false"
            :visible.sync="showRefusedUser"
            width="600px">
            <el-radio-group v-model="radioTxt">
                <el-radio-button class="radio-item" label="非游戏">非游戏（Y）</el-radio-button>
                <el-radio-button class="radio-item" label="质量低">质量低（U）</el-radio-button>
                <el-radio-button class="radio-item" label="不宜展示">不宜展示（I）</el-radio-button>
                <el-radio-button class="radio-item" label="优化标题">优化标题（O）</el-radio-button>
                <el-radio-button class="radio-item" label="关联游戏错误">关联游戏错误（P）</el-radio-button>
                <el-radio-button class="radio-item" label="关联视频类型错误">关联视频类型错误（H）</el-radio-button>
                <el-radio-button class="radio-item" label="黑屏">黑屏（N）</el-radio-button>
            </el-radio-group>
            <el-input
                ref="textarea"
                type="textarea"
                @focus="inputFlag = true"
                @blur="inputFlag =false"
                :rows="2"
                placeholder="请输入内容（L）"
                v-model="textarea">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="refusedUser">确 定(J)</el-button>
                <el-button size="mini" @click="showRefusedUser = false">取 消(K)</el-button>
            </span>
        </el-dialog>

        <!-- 封禁用户 -->
        <el-dialog
            title="提示"
            :close-on-click-modal="false"
            :show-close="false"
            :visible.sync="showDisableUser"
            width="30%">
            <span>确定要封禁该用户么？</span>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="delUser">确 定(J)</el-button>
                <el-button size="mini" @click="showDisableUser = false">取 消(K)</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            inputFlag: false,
            showDisableUser: false, // 封禁用户弹窗
            showRefusedUser: false, // 拒绝用户弹窗
            textarea: '',
            playbackRate: 1,
            currentIndex: 0,
            radioTxt: '非游戏',
            list: [],
            // video: 'http://video.shike.com/original/203ba51f0fab4f429ffa43c6ed760fde/20bb4a06-16f672ea9e8.mp4'
            video: '',
            categoryList: []
        }
    },
    mounted () {
        this.getList()
        this.findVideoCategory()
        document.addEventListener('keydown', this.keydown)
    },
    computed: {
        detail () {
            if (this.list.length > this.currentIndex) {
                return this.list[this.currentIndex]
            }
            return {}
        }
    },
    watch: {
        currentIndex () {
            setTimeout(() => {
                if (this.$refs.readio) {
                    this.$refs.readio.playbackRate = this.playbackRate
                }
            }, 100)
        },

        textarea (val) {
            if (val) {
                this.radioTxt = ''
            }
        },
        radioTxt (val) {
            if (val) {
                this.textarea = ''
            }
        }
    },
    methods: {
        async getList () {
            if (this.loading) return
            this.loading = true
            let params = {
                pageIndex: 1,
                pageNum: 100,
                status: 1
            }
            if (this.$route.query.keyword) {
                params.keyword = this.$route.query.keyword
            }
            let res = await this.$http.post('/video/findGameVideos', params)
            if (res.code === '0') {
                if (this.$route.query.id) {
                    res.data.forEach((item, index) => {
                        if (item.videoid === this.$route.query.id) {
                            this.currentIndex = index
                        }
                    })
                }
                this.list = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },

        async findVideoCategory () {
            let res = await this.$http.post('/video/findVideoCategory')
            if (res.code === '0') {
                this.categoryList = res.data || []
            }
        },

        whatType (type) {
            let typeStr = '/'
            if (type) {
                this.categoryList.forEach(item => {
                    if (type === item.category) {
                        typeStr = item.name
                    }
                })
            }
            return typeStr
        },

        // 键盘按下事件
        keydown (e) {
            if (this.inputFlag) return
            let keyCode = e.keyCode
            console.log(keyCode)
            if (this.showDisableUser || this.showRefusedUser) {
                if (keyCode === 49 || keyCode === 50 || keyCode === 51) {
                    return
                }
            }
            // 如果是驳回用户
            if (this.showRefusedUser) {
                switch (keyCode) {
                case 89: // Y
                    this.radioTxt = '非游戏'
                    break
                case 85: // U
                    this.radioTxt = '质量低'
                    break
                case 73: // I
                    this.radioTxt = '不宜展示'
                    break
                case 79: // O
                    this.radioTxt = '优化标题'
                    break
                case 80: // P
                    this.radioTxt = '关联游戏错误'
                    break
                case 72: // H
                    this.radioTxt = '关联视频类型错误'
                    break
                case 78: // N
                    this.radioTxt = '黑屏'
                    break
                case 76: // L
                    this.radioTxt = ''
                    this.inputFlag = true
                    setTimeout(() => {
                        this.$refs.textarea.focus()
                    }, 100)
                    break
                case 74:
                    this.refusedUser()
                    break
                case 75:
                    this.showRefusedUser = false
                    break
                }
            } else if (this.showDisableUser) {
                // 如果是封禁用户
                switch (keyCode) {
                case 74:
                    this.delUser()
                    break
                case 75:
                    this.showDisableUser = false
                    break
                }
            } else {
                switch (keyCode) {
                case 49:
                    this.throwUser()
                    break
                case 50:
                    this.showRefusedUser = true
                    break
                // case 51:
                //     this.showDisableUser = true
                //     break
                case 38: // up
                    this.goUp()
                    break
                case 40: // down
                    this.goDown()
                    break
                }
            }
        },

        // 按下键盘1 通过用户
        async throwUser () {
            let params = {
                videoId: this.detail.videoid,
                status: 2
            }
            let res = await this.$http.post('/video/updateGameVideoStatus', params)
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '已通过'
                })
                this.detail.auditStatus = 2
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.checkNext()
        },
        goUp () {
            if (this.currentIndex === 0) {
                this.$message({
                    type: 'warning',
                    message: '这已经是第一条了哦！'
                })
            } else {
                this.currentIndex--
            }
        },

        goDown () {
            if (this.currentIndex === this.list.length - 1) {
                this.$message({
                    type: 'warning',
                    message: '这已经是最后一条了哦！'
                })
            } else {
                this.currentIndex++
            }
        },

        // 审核下一条
        checkNext () {
            if (this.currentIndex === this.list.length - 1) {
                setTimeout(() => {
                    this.$message({
                        type: 'warning',
                        message: '后边没有了已经全部审核完成了'
                    })
                }, 100)
            } else {
                this.currentIndex++
            }
        },

        keyDownOk () {
            // 如果是封禁用户弹窗
            if (this.showDisableUser) {
                return
            }
            // 如果是拒绝用户
            if (this.showRefusedUser) {
            }
        },

        keyDownCancel () {
            // 如果是封禁用户弹窗
            if (this.showDisableUser) {
                return
            }
            // 如果是拒绝用户
            if (this.showRefusedUser) {
            }
        },

        playbackRateChange (val) {
            this.$refs.readio.playbackRate = val
        },

        // 拒绝用户
        async refusedUser () {
            let params = {
                videoId: this.detail.videoid,
                status: -2,
                reason: this.radioTxt || this.textarea
            }
            let res = await this.$http.post('/video/updateGameVideoStatus', params)
            if (res.code === '0') {
                this.$message({
                    type: 'success',
                    message: '已拒绝'
                })
                this.detail.auditStatus = -2
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.checkNext()
            this.showRefusedUser = false
        },

        // 封禁用户
        async delUser () {
            // let params = {
            //     userId: this.detail.userid
            // }
            // let res = await this.$http.post('/video/forbideUser', params)
            // if (res.code === '0') {
            //     this.$message({
            //         type: 'success',
            //         message: '封禁成功'
            //     })
            //     this.detail.auditStatus = 3
            // } else {
            //     this.$message({
            //         type: 'error',
            //         message: res.desc
            //     })
            // }
            this.showDisableUser = false
        }
    },
    beforeDestroy () {
        document.removeEventListener('keydown', this.keydown)
    }
}
</script>

<style lang="scss" scoped>
    .audit-video-detail {
        .top-tip {
            text-align: center;
        }
        .flex-box {
            padding-top: 20px;
            display: flex;
            .left-box {
                width: 400px;
                padding: 0 20px;
                .video-box {
                    height: 640px;
                    border: 1px dashed #cccccc;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .video {
                        width: 100%;
                        max-height: 640px;
                        outline: none;
                    }
                }
                .video-playbackRate {
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                }
            }
            .right-box {
                flex: 1;
                .rigth-item {
                    display: flex;
                    margin-bottom: 10px;
                    .title {
                        width: 100px;
                        text-align: right;
                    }
                    .content {
                        padding-left: 10px;
                        color: #666666;
                        flex: 1;
                        .icon {
                            width: 200px;
                            height: 200px;
                            // background-color: pink;
                            // display: flex;
                            // align-items: center;
                            // justify-content: center;
                            > img {
                                width: 100%;
                                max-height: 100%;
                            }
                        }
                        .user-icon {
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            margin-right: 5px;
                            vertical-align: middle;
                        }
                    }
                }
                .tools {
                    margin-top: 20px;
                }
            }
        }
        .show-refused-user-box {
            .radio-item {
                border: 1px solid #DCDFE6;
                margin-right: 10px;
                margin-bottom: 10px;
                /deep/ .el-radio-button__inner {
                    border: none;
                }
            }
        }
    }
</style>
